<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref
} from 'vue'

const age = ref(19)
// 1.创建
const timerId = setInterval(() => {
  age.value++
  console.log(age.value)
}, 1000)

// 2.挂载
onBeforeMount(() => {
  console.log('组件挂载之前-onBeforeMount()')
})
onMounted(() => {
  console.log('组件挂载之后-onMounted()')
})
// 3.更新
onBeforeUpdate(() => {
  console.log('数据已经更新, 但视图还没有更新- onBeforeUpdate()')
})
onUpdated(() => {
  console.log('数据已经更新, 但视图还没有更新- onUpdated()')
})

// 4. 销毁
onBeforeUnmount(() => {
  console.log('销毁之前- onBeforeUnmount()')
  clearInterval(timerId)
})

onUnmounted(() => {
  console.log('销毁之后- onUnmounted()')
})
</script>

<template>
  <div class="box">子组件</div>
</template>

<style>
.box {
  width: 300px;
  height: 300px;
  background-color: red;
}
</style>